<template>
  <div>
    <el-button v-if="!disabled" class="button-new-tag" icon="el-icon-plus" size="small" @click="open()">
      {{ btnInfo }}
    </el-button>
    <div style="margin-bottom: 10px;">
      <div v-for="(item, index) in value" :key="index">
        {{ item.groupName }}
        <el-button :disabled="disabled" size="mini" type="text" @click="value.splice(index, 1)">删除</el-button>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="选择群聊" width="1120px">
      <el-row class="row-radar">
        <el-col :span="12">
          <el-form :model="queryForm" style="display: flex">
            <el-form-item prop="weUserId">
              <el-select v-model="queryForm.weUserId" placeholder="请选择超级企微" style="width: 140px;"
                         @change="handleQuery">
                <el-option
                  v-for="item in customerList"
                  :key="item.weUserId"
                  :label="item.userName"
                  :value="item.weUserId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="groupName">
              <el-input
                v-model="queryForm.groupName"
                placeholder="搜索群名称" style="width: 200px"
                @blur="handleQuery">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
          </el-form>
          <el-table ref="multipleTable" v-loading="loading" :data="tableList" height="442px"
                    style="width: 100%" @select="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column align="left" label="群名" min-width="120px" prop="userName"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <div style="display: flex">
                  <svg-icon icon-class="selectGroup" style="width: 22px;height: 22px"></svg-icon>
                  <div style="margin-left: 12px">{{ scope.row.groupName }}</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :offset="1" :span="11" style="border-left: 1px solid #eee; padding: 0px 15px 20px 15px;">
          <div style="color: #999999;line-height: 60px;margin-left: 26px;font-size: 18px">
            当前{{ tableList.length || 0 }}个/已选{{ checkedList.length || 0 }}个群聊
          </div>
          <div v-if="checkedList.length > 0" class="selectedListArea">
            <div v-for="(item,index) in checkedList" :key="item.chatId">
              <div class="selectedListArea-list-item">
                <svg-icon icon-class="selectGroup" style="width: 22px;height: 22px"></svg-icon>
                <div class="selectedListArea-list-item-close-groupName">
                  {{ item.groupName }}
                </div>
                <i class="el-icon-circle-close selectedListArea-list-item-close"
                   @click="delSelected(item.chatId, index)"></i>
              </div>
            </div>
          </div>
          <div v-else class="noSelectedListArea">
            <img src="../assets/image/noGroup.png">
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {queryQYGroup} from "@/api/groupList/groupList";

export default {
  name: 'selectGroup',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    isSingleOption: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    btnInfo: {
      type: String,
      default: '群聊'
    },
    customerList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      visible: false,
      total: 0,
      tableList: [],
      checkedList: [],
      drainageOpt: {},
      loading: false,
      queryForm: {
        weUserId: '',
        groupName: '',
        pageNum: 1,
        pageSize: 9999
      },
      options: [],
    }
  },
  mounted() {
  },
  methods: {
    open() {
      if (this.customerList.length == 0) return this.$message.error('请先选择超级企微')
      this.queryForm.weUserId = this.customerList?.[0].weUserId
      this.getListFn()
      this.visible = true;
      this.checkedList = JSON.parse(JSON.stringify(this.value))
    },
    ok() {
      if (this.isSingleOption) {
        let arr = new Array()
        arr.push({...this.checkedList[0]})
        this.visible = false;
        this.$emit('change', arr)
      } else {
        this.visible = false;
        console.log(this.checkedList, '134')
        this.$emit('change', this.checkedList)
      }
    },
    handleSelectionChange(selection, val) {
      console.log(selection, val, this.isSingleOption, '123456765')
      if (this.isSingleOption) {
        this.$refs.multipleTable.clearSelection();
        if (selection.length == 0) {
          this.selectedRow = [];  // 清空data中绑定的selectedRow
          return
        }
        ;
        // 切换最近一次选择数据的状态
        this.$refs.multipleTable.toggleRowSelection(val, true);
        // 更新data中的selectedRow
        this.checkedList = [{...val}];
        // console.log(val);
      } else {
        this.checkedList = []
        selection.forEach(item => {
          console.log(item, '1')
          if (this.checkedList.filter(element => item.chatId == element.chatId).length == 0) this.checkedList.push({...item})
        })
      }
    },
    delSelected(val, index) {
      this.tableList.forEach(item => {
        if (item.chatId == val) {
          this.$refs.multipleTable.toggleRowSelection(item, false);
          this.checkedList.splice(index, 1)
        }
      })
    },
    handleQuery() {
      this.checkedList = []
      this.getListFn('1')
    },
    getListFn(flag) {
      console.log(this.queryForm, 'queryForm')
      let obj = {
        ...this.queryForm,
      };
      this.loading = true;
      this.tableList = []
      this.loading = true
      queryQYGroup(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.data
          this.$nextTick(() => {
            if (this.value.length > 0 && this.tableList.length > 0 && flag != '1') {
              this.value.forEach(item => {
                this.tableList.forEach(element => {
                  if (element.chatId == item.chatId) {
                    this.$refs.multipleTable.toggleRowSelection(element);
                  }
                })
              })
            }
          })
          this.total = res.total;
          console.log('tableList', this.tableList);
        }
      }).finally(() => this.loading = false)
    },
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/base.scss";

.selectedListArea {
  margin-left: 26px;
  height: 440px;
  overflow-y: auto;
}

.noSelectedListArea {
  margin-left: 26px;
  width: 440px;
  height: 440px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F6F6F6;

  img {
    width: 120px;
    height: 120px;
  }
}

.selectedListArea-list-item {
  line-height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.selectedListArea-list-item-close {
  position: absolute;
  right: 0;
  font-size: 22px;

  &:hover {
    color: #082aff;
    cursor: pointer;
  }
}

.selectedListArea-list-item-close-groupName {
  max-width: 220px;
  margin-left: 12px;
  line-height: 24px;
}
</style>

